<template>
    <div class="pie" v-if="Visible">
        <echatrs :id="id" :option="option"></echatrs>
    </div>
</template>

<script>
    import echatrs from '@/components/echatrs'
    import 'echarts/map/js/china.js'
    export default {
        name: "xlmap",
        data(){
            return{
                option:{},
                Visible:false
            }
        },
        props:{
            id:String
        },
        components:{
            echatrs
        },
        methods:{
            format(option){
                this.option = { // 进行相关配置
                    tooltip: {}, // 鼠标移到图里面的浮动提示框
                    dataRange: {
                        show: false,
                        min: 0,
                        max: 1000,
                        text: ['High', 'Low'],
                        realtime: true,
                        calculable: true,
                        color: ['orangered', 'yellow', 'lightskyblue']
                    },
                    geo: { // 这个是重点配置区
                        map: 'china', // 表示中国地图
                        roam: true,
                        label: {
                            normal: {
                                show: true, // 是否显示对应地名
                                textStyle: {
                                    color: 'rgba(0,0,0,0.4)'
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(0, 0, 0, 0.2)'
                            },
                            emphasis: {
                                areaColor: null,
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowBlur: 20,
                                borderWidth: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    series: [{
                        type: 'scatter',
                        coordinateSystem: 'geo' // 对应上方配置
                    },
                        {
                            name: '启动次数', // 浮动框的标题
                            type: 'map',
                            geoIndex: 0,
                            data: [{
                                "name": "北京",
                                "value": 599
                            }, {
                                "name": "上海",
                                "value": 142
                            }, {
                                "name": "黑龙江",
                                "value": 44
                            }, {
                                "name": "深圳",
                                "value": 92
                            }, {
                                "name": "湖北",
                                "value": 810
                            }, {
                                "name": "四川",
                                "value": 453
                            }, {
                                "name": "江苏",
                                "value": 999
                            }, {
                                "name": "天津",
                                "value": 888
                            }, {
                                "name": "安徽",
                                "value": 777
                            }, {
                                "name": "成都",
                                "value": 666
                            }, {
                                "name": "江西",
                                "value": 777
                            }, {
                                "name": "广州",
                                "value": 777
                            }, {
                                "name": "台湾",
                                "value": 777
                            }]
                        }
                    ]
                }
                this.Visible = true
            }
        }
    }
</script>

<style scoped lang="less">
    .pie{
        width: 100%;
        height: 100%;
    }
</style>
